<template>
    <div class="handler-document" v-loading="loading" element-loading-background="rgba(255, 255, 255,1)">
      <div class="title">
        审批处理笺
      </div>
      <table class="table-wrapper" border="1px" cellspacing="0" cellpadding="0">
        <tr height="40">
          <td width="12%" align="center">发文字号</td>
          <td width="35%">
            <span>技术部</span></td>
          <td width="12%" align="center">发文日期</td>
          <td width="35%">
            <span>2019-08-12</span>
          </td>
        </tr>
        <tr height="40">
          <td align="center">文件标题</td>
          <td colspan="4">
            <span>{{ pager.title}}</span>
          </td>
        </tr>
        <tr height="40">
          <td width="12%" align="center">缓急程度</td>
          <td width="35%">
            <span>{{ pager.emergency_level }}</span>
          </td>
          <td width="12%" align="center">份数</td>
          <td width="35%">
            <span>1</span>
          </td>
        </tr>
        <tr height="40">
          <td width="10%" align="center">发文目标</td>
          <td width="35%">
            <span>{{ pager.way}}</span>
          </td>
          <td width="12%" align="center">公文分类</td>
          <td width="35%">
            <span>{{ pager.paper_type}}</span>
          </td>
        </tr>
          <tr class="situation">
              <td  width="30" align="center">拟办意见</td>
              <td colspan="4" class="content">
                  <div class="inform">
                      <div class="inform-comment">{{ info.comment }}</div>
                      <div class="info">
                        <div class="info-name">{{ info.name }}</div>
                        <div>{{ info.date }}</div>
                      </div>
                    </div>
                </td>
            </tr>
        <!-- <tr class="situation">
          <td width="30" align="center">领导批示</td>
          <td colspan="4" class="content">
            <div class="inform" v-for="(item,index) in situation">
              <div>{{ item.fullMessage }}</div>
              <div class="info">
                <div class="info-name">{{ item.userId }}</div>
                <div>{{ item.date }}</div>
              </div>
            </div>
          </td>
        </tr> -->
        <tr class="situation" v-for="(point, index) in pointNameList" :key="index">
          <td width="30" align="center">{{ point}}</td>
          <td colspan="4" class="content">
  
          </td>
        </tr>
      </table>
      <el-divider></el-divider>
      <el-row type="flex" class="input-warpper">
        <div class="name">审批意见:</div>
        <el-input type="text" v-model="comment" clearable size="small"></el-input>
      </el-row>
      <el-row type="flex" justify="center">
        <el-button type="primary" size="small" @click="handSaveProcess">保存流转</el-button>
        <el-button type="danger" size="small" @click="handReject">驳回</el-button>
        <el-button type="danger" size="small" @click="handEntrust">委托</el-button>
        <el-button type="danger" size="small" @click="">抄送</el-button>
        <!-- <el-button type="primary" size="small" @click="">打印</el-button> -->
        <el-button type="primary" size="small" @click="showDialogProcess">流程监控</el-button>
      </el-row>
      <!-- 流程监控 -->
      <el-dialog title="流程监控" :visible.sync="dialogProcessVisible" width="70%">
        <el-timeline class="process-info ">
          <el-timeline-item v-for="(item, index) in activities" :key="index">
            <el-card>
              <div slot="header" class="clearfix">
                <span>{{ item.activityName }}</span>
                <span class="user"><i class="icon el-icon-user" v-if="item.assignee"></i>{{ item.assignee }}</span>
              </div>
              <div class="content">
  
                开始时间:<span class="time">{{ item._startTime }}</span>
                结束时间:<span class="time">{{ item._endTime }}</span>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-dialog>
    </div>
</template>
  
  <script>
    import {
      mapGetters
    } from "vuex";
    import {
      getPaperClassify,
      createDocument,
      getPagerById
    } from "@/api/document.js";
    import {
      getProcess,
      getProcessPointNames,
      startProcess,
      completeTasks,
      getCommenthi,
      getProcessMinitor,
      postEntrustToOther
    } from "@/api/workflow.js";
    import {
      parseTime
    } from "@/utils/index";
  
    export default {
      name: "HandlePager",
      components: {
        
      },
      filters: {
        formatPriceMoney: function (val) {
          if (!val) return "";
          let value = val.toFixed(2);
          return value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        },
        formatPriceUpper: function (val) {
          if (!val) return "";
          let value = val.toFixed(2);
          return changeNumMoneyToChinese(value);
        },
        formatDate: function (val) {
          if (!val) return "";
          let date = val.split("T")[0];
          return date.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$1年$2月$3日");
        }
      },
      data() {
        return {
          pager: {},
          info: {
            comment: '收文单位文秘部门对所收到的文件提出的\t送负责人批示或者交有关部门办理的意见收文单位文秘部门对所收到的文件提出的\t送负责人批示或者交有关部门办理的意见',
            name: '张三',
            date: '2019-10-22 11:59'
          },
          situation: [{
              comment: '已通过审批',
              name: '张三',
              date: '2019-10-22 11:59'
            },
            {
              comment: '已阅',
              name: '张三',
              date: '2019-10-22 11:59'
            },
            {
              comment: '已阅',
              name: '张三',
              date: '2019-10-22 11:59'
            },
            {
              comment: '已阅',
              name: '李四',
              date: '2019-10-22 11:59'
            },
          ],
          activities: [{
            content: '活动按期开始',
            timestamp: '2018-04-15'
          }, {
            content: '通过审核',
            timestamp: '2018-04-13'
          }, {
            content: '创建成功',
            timestamp: '2018-04-11'
          }],
          loading: false,
          dialogProcessVisible: false,
          queryData: null,
          pointNameList: [], // 流程节点名称
          comment: '' // 处理意见
        };
      },
      computed: {
        inpNum() {
          return this.document.printAmount
        },
        ...mapGetters([
          'id'
        ]),
      },
      created() {
        this.queryData = this.$route.params
        // this.requestPager();
        this.requestProcessPointNames()
        this.requestCommenthi()
      },
      watch: {
  
      },
      methods: {
        // 保存流程
        handSaveProcess() {
          const param = {
            dealReason: this.comment,
            dealType: '0',
            dealUserId: this.id,
            dealUnitId: "0"
          }
          completeTasks(this.queryData.targetId, param).then(res => {
            if (res && res.data.message === "完成任务成功") {
              this.$notify({
                title: '成功',
                message: '保存流转成功',
                type: 'success'
              });
            } else {
              this.$notify({
                title: '失败',
                message: '保存流转失败',
                type: 'error'
              });
            }
          })
        },
        // 驳回
        handReject() {
          const param = {
            dealReason: this.comment,
            dealType: "1",
            dealUserId: this.name,
            dealUnitId:"",
            rejectElemKey:"sid-C966AB6A-3919-4B6E-8985-FC7DC949B52E"
          }
          completeTasks(this.queryData.targetId, param).then(res => {
            if (res && res.data === true) {
              this.$notify({
                title: '成功',
                message: '驳回审批成功',
                type: 'success'
              });
            } else {
              this.$notify({
                title: '失败',
                message: '驳回审批失败',
                type: 'error'
              });
            }
          })
        },
        // 委托
        handEntrust(){
          postEntrustToOther(this.queryData.targetId, '32').then(
            res =>{
              if (res && res.data.message === "转发任务成功") {
                this.$notify({
                  title: '成功',
                  message: '转发任务成功',
                  type: 'success'
                });
              }
            }
          )
        },
        // 显示流程监控页面
        showDialogProcess() {
          this.dialogProcessVisible = true
          this.requestProcessMinitor()
        },
        // 获取流程监控数据
        requestProcessMinitor() {
          getProcessMinitor(this.queryData.proId).then(
            res => {
              const data = res.data
              data.forEach(
                e => {
                  e._startTime = parseTime(e.startTime, '{y}-{m}-{d}')
                  e._endTime = parseTime(e.endTime, '{y}-{m}-{d}')
                }
              )
              this.activities = data
            }
          )
        },
        // 获取流程节点名称
        requestProcessPointNames() {
          getProcessPointNames(this.queryData.proDefId).then(
            res => {
                res.data.data.shift()
                const list = res.data.data
                this.pointNameList = list.map((item, index, arr) =>{
                    return Object.values(item)[0]
                })
            }
          )
        },
        requestPager() {
          getPagerById(this.queryData.id).then(
            res => {
              this.pager = res.data
            }
          )
        },
        // 获取审批记录
        requestCommenthi() {
          getCommenthi(this.queryData.proId).then(
            res => {
              const data = res.data
              data.forEach(
                e => {
                  e.date = parseTime(e.time, '{y}-{m}-{d} {h}:{i}')
                }
              )
              this.situation = data
            }
          )
        }
      }
    };
  
  </script>
  <style media="printContent">
    @page {
      size: auto;
      /* auto is the initial value */
      margin: 0mm 15mm 0;
    }
  
  </style>
  <style lang="scss">
    .handler-document {
      margin: 0 20px 20px;
      overflow-x: hidden;
  
      table{
      border-collapse:collapse;
      border:none;
    }
    table td{
      border: 1px solid red;
    }
      .title {
        text-align: center;
        font-size: 25px;
        color: red;
        padding: 15px 0px;
      }
  
      .table-wrapper {
        width: 100%;
        max-width: 800px;
        font-size: 14px;
        font-weight: bold;
        border-color: #f443367a;
        color: red;
        margin: 0 auto;
  
        .situation {
          min-height: 80px;
          height: 80px;
  
          .content {
            padding: 10px 0;
  
            .inform {
              height: 70px;
              padding: 10px;
              /* margin: 0 10px; */
              border-bottom: 1px dotted;
              color: #000;
              font-weight: normal;
  
              &-comment {
                width: 60%;
              }
  
              .info {
                float: right;
                font-size: 12px;
                text-align: center;
                color: #797979;
  
                &-name {
                  padding: 6px;
                }
              }
  
              &:last-child {
                border: none;
              }
            }
          }
        }
  
        td {
          span {
            margin-left: 10px;
            color: #000;
            font-weight: normal;
          }
        }
  
        .radio-group {
          margin-left: 15px;
        }
  
        .el-input__inner {
          background-color: transparent;
          border: 0;
        }
      }
  
      .input-warpper {
        max-width: 800px;
        width: 100%;
        margin: 10px auto;
  
        .name {
          width: 80px;
          color: #797979;
          line-height: 30px;
        }
      }
  
      .process-info {
        padding-left: 5px;
  
        .user {
          float: right;
          padding: 3px 0;
  
          .icon {
            padding-right: 3px;
          }
        }
  
        .content {
          font-size: 12px;
          color: #999;
  
          .time {
            display: inline-block;
            padding: 10px 0;
          }
        }
      }
  
      .el-divider--horizontal {
        margin: 24px auto;
      }
  
      .el-card__header {
        padding: 10px 20px;
      }
  
      .el-card__body {
        padding: 0 20px;
      }
  
      .el-button+.el-button {
        margin-left: 10px;
      }
    }
  
  </style>
  